<template>
	<view class="page">
		<!-- <uni-nav-bar status-bar :border="false" color="#000" title="首页" fixed
			backgroundColor="rgba(255,255,255,1)"></uni-nav-bar> -->
		<!-- 导航栏 -->

		<view class="fixed" style="top: 0; z-index: 10; left: 0; right: 0; background-color: #ffffff">
			<view :style="{ height: top + 'px' }"></view>
			<view :style="{ height: height + 'px' }" class="flex flex-between px22 align-center">
				<text></text>
				<text>首页</text>
				<text></text>
			</view>
		</view>

		<view class="relactive mx22" :style="{ marginTop: top + height + 'px' }">
			<view class="absolute flex flex-end pr40" style="bottom: 20rpx; z-index: 2; left: 0; right: 0">
				<text class="py4 px8 colf br18" style="background: rgba(0, 0, 0, 0.5)">{{ swiperIndex + 1 }}/ <text
						class="font20">{{ bannerList.length }}</text></text>
			</view>
			<u-swiper height="125" :list="bannerList" @change="change" @click="click"></u-swiper>
		</view>

		<view class="bgWhite py40 px40 br16 mt24 mx22">
			<view class="flex flex-between align-center">
				<view class="flex flex-1" @click="goUser">
					<!-- 	<image class="br110 mr26" :src="userInfo.wxPhotoURL || ''" style="height:110rpx; width:110rpx;"
											mode=""></image> -->
					<view class="flex flex-column flex-around flex-1">
						<text class="font800 font36">{{ userInfo.truename || "" }} </text>
						<text>{{ userInfo.county_name || "" }}</text>
						<text v-if="userInfo.identity_type==1">射洪市</text>
						<text
							v-if="userInfo.village_name && [2,3,4].indexOf(userInfo.identity_type)!=-1">{{userInfo.village_name || ''}}</text>
						<text>{{ userInfo.work || "" }}</text>
					</view>
				</view>
				<view @click="addPatrol" 
					class="flex px16 border-box py16 align-center flex-center br36"
					style="height: 72rpx; width: 192rpx; border: 2rpx solid #1f9a64">
					<image class="" style="width: 32rpx; height: 32rpx; margin-right: 10rpx" src="/static/index/add.png"
						mode=""></image>
					<text style="color: #1f9a64">添加巡查</text>
				</view>
			</view>

			<view class="flex mt40 flex-between">
				<view @click="goMonth" class="flex flex-column align-center flex-center"
					style="width: 300rpx; height: 130rpx; background: linear-gradient(180deg, #ebf3ff 0%, #ffffff 100%)">
					<text>本月巡查(件)</text>
					<text class="mt20 font36" style="color: #17a5e3">{{ homeData.month_count || 0 }}</text>
				</view>
				<view @click="goTotal" class="flex flex-column align-center flex-center"
					style="width: 300rpx; height: 130rpx; background: linear-gradient(180deg, #e1fff2 0%, #ffffff 100%)">
					<text>总巡查(件)</text>
					<text class="mt20 font36" style="color: #29c17e">{{ homeData.count }}</text>
				</view>
			</view>
		</view>

		<view class="bgWhite mt20 box-shadow"
			:style="{ position: 'sticky', left: 0, right: 0, top: tops + 'px', zIndex: 20 }">
			<scroll-view scroll-x="true" class="" style="white-space: nowrap">
				<view class="px40 relactive" @click="tabClick(1)" style="display: inline-block">
					<view class="flex flex-column flex-around align-center" style="height: 85rpx">
						<view class="">
							<text>本月巡查</text>
						</view>
						<view class="" v-if="tabActive == 1"
							style="position: absolute; bottom: 0; height: 2rpx; width: 80rpx; background-color: orangered">
						</view>
					</view>
				</view>
				<view class="px40 relactive" @click="tabClick(2)" style="display: inline-block">
					<view class="flex flex-column flex-around align-center" style="height: 85rpx">
						<view class="">
							<text>总巡查</text>
						</view>
						<view class="" v-if="tabActive == 2"
							style="position: absolute; bottom: 0; height: 2rpx; width: 80rpx; background-color: orangered">
						</view>
					</view>
				</view>

				<view class="px40 relactive" v-if="userInfo.identity_type == 1" @click="tabClick(4)"
					style="display: inline-block">
					<view class="flex flex-column flex-around align-center" style="height: 85rpx">
						<view class="">
							<text> {{ selectZhenName || "选择镇" }}</text>
						</view>
						<view class="" v-if="tabActive == 4"
							style="position: absolute; bottom: 0; height: 2rpx; width: 80rpx; background-color: orangered">
						</view>
					</view>
				</view>

				<view class="px40 relactive" v-if="userInfo.identity_type == 1" @click="tabClick(5)"
					style="display: inline-block">
					<view class="flex flex-column flex-around align-center" style="height: 85rpx">
						<view class="">
							<text>{{ selectCunName || "选择村" }}</text>
						</view>
						<view class="" v-if="tabActive == 5"
							style="position: absolute; bottom: 0; height: 2rpx; width: 80rpx; background-color: orangered">
						</view>
					</view>
				</view>

				<view class="px40" v-if="userInfo.identity_type !== 1" @click="tabClick(3)"
					style="display: inline-block">
					<view class="flex flex-column flex-around align-center" style="height: 85rpx">
						<view class="">
							<text>{{ selectUserName || "筛选巡查员" }}</text>
						</view>
					</view>
				</view>
				<view class="px40" v-if="userInfo.identity_type == 1" @click="tabClick(6)"
					style="display: inline-block">
					<view class="flex flex-column flex-around align-center" style="height: 85rpx">
						<view class="">
							<text>{{ selectShiUserName || "筛选巡查员" }}</text>
						</view>
						<!-- <view class="" v-if="tabActive==3" style=" height:2rpx; width:80rpx; background-color: orangered;">
							</view> -->
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="px22">
			<ProductCard @ProductCardClick="ProductCardClick(item)" :productData="item" v-for="item in productData"
				:key="item.id"></ProductCard>
		</view>

		<u-loadmore class="mt50" iconSize="14" :height="50" font-size="14" :status="status" :loading-text="loadingText"
			:loadmore-text="loadmoreText" :nomore-text="nomoreText" />

		<u-popup :show="popupShow" mode="bottom" @close="close" @open="open">
			<!-- 不是市账号的筛选巡查员 -->
			<view class="" v-if="tabActive2 == 3">
				<view class="px30 flex bbe flex-between align-center" style="height: 117rpx">
					<text></text>
					<text class="col2 font32 font600">选择巡查员</text>
					<image @click="close" src="@/static/form/close.png" mode="" style="width: 40rpx; height: 40rpx">
					</image>
				</view>

				<view class="flex flex-wrap flex-start pb100" style="height: 600rpx;overflow: scroll;">
					<view @click="clickUser(item)" class="flex px22 mt20 flex-center align-center" v-for="item in child"
						:key="item.id" style="width: 33.3%; height: 80rpx">
						<view class="px40 br30 py20"
							:style="{ border: user_patrol_id_copy == item.id ? '2rpx solid #FF7334' : '2rpx solid #333' }">
							<text :class="['col3']"
								:style="{ color: user_patrol_id_copy == item.id ? '#FF7334' : '#333' }">{{ item.truename }}</text>
						</view>
					</view>
				</view>

				<view class="flex flex-around px22"
					style="position: absolute; bottom: 20rpx; height: 80rpx; left: 0; right: 0;background-color: white;">
					<view @click="reset" class="px22 br20 col2 mr30 flex1 flex flex-center align-center"
						style="border: 2rpx solid #222"> 重置 </view>
					<view class="px22 colf flex1 br20 flex flex-center align-center" @click="handClick"
						style="border: 2rpx solid #ff7334; background-color: #ff7334"> 确定 </view>
				</view>
			</view>

			<view class="" v-if="tabActive2 == 4">
				<view class="px30 flex bbe flex-between align-center" style="height: 117rpx">
					<text></text>
					<text class="col2 font32 font600">选择镇</text>
					<image @click="close" src="@/static/form/close.png" mode="" style="width: 40rpx; height: 40rpx">
					</image>
				</view>

				<view class="pb100" style="height: 600rpx;overflow: scroll;">
					<view @click="clickZhen(item)" class="flex border-box px22 mt20 flex-center align-center"
						v-for="item in address" :key="item.id"
						style="width: 33.3%; height: 80rpx; display: inline-block">
						<view class="px40 br30 py20 flex flex-center align-center"
							:style="{ border: zhenId == item.id ? '2rpx solid #FF7334' : '2rpx solid #333' }">
							<text :class="['col3']"
								:style="{ color: zhenId == item.id ? '#FF7334' : '#333' }">{{ item.name }}</text>
						</view>
					</view>
				</view>

				<view class="flex flex-around px22"
					style="position: absolute; bottom: 20rpx; height: 80rpx; left: 0; right: 0;background-color: white;">
					<view @click="resetZhen" class="px22 br20 col2 mr30 flex1 flex flex-center align-center"
						style="border: 2rpx solid #222"> 重置 </view>
					<view class="px22 colf flex1 br20 flex flex-center align-center" @click="submitZhen"
						style="border: 2rpx solid #ff7334; background-color: #ff7334"> 确定 </view>
				</view>
			</view>

			<view class="" v-if="tabActive2 == 5">
				<view class="px30 flex bbe flex-between align-center" style="height: 117rpx">
					<text></text>
					<text class="col2 font32 font600">选择村</text>
					<image @click="close" src="@/static/form/close.png" mode="" style="width: 40rpx; height: 40rpx">
					</image>
				</view>

				<view class="pb100" style="height: 600rpx;overflow: scroll;">
					<view @click="clickCun(item)" class="flex border-box px22 mt20 flex-center align-center"
						v-for="item in villageList" :key="item.id"
						style="width: 33.3%; height: 80rpx; display: inline-block">
						<view class="px40 br30 py20"
							:style="{ border: cunId == item.id ? '2rpx solid #FF7334' : '2rpx solid #333' }">
							<text :class="['col3']"
								:style="{ color: cunId == item.id ? '#FF7334' : '#333' }">{{ item.name }}</text>
						</view>
					</view>
				</view>

				<view class="flex flex-around px22"
					style="position: absolute; bottom: 20rpx; height: 80rpx; left: 0; right: 0;background-color: white;">
					<view @click="resetCun" class="px22 br20 col2 mr30 flex1 flex flex-center align-center"
						style="border: 2rpx solid #222"> 重置 </view>
					<view class="px22 colf flex1 br20 flex flex-center align-center" @click="submitCun"
						style="border: 2rpx solid #ff7334; background-color: #ff7334"> 确定 </view>
				</view>
			</view>
			<!-- 筛选市巡查员 -->
			<view class="" v-if="tabActive2 == 6">
				<view class="px30 flex bbe flex-between align-center" style="height: 117rpx">
					<text></text>
					<text class="col2 font32 font600">选择巡查员</text>
					<image @click="close" src="@/static/form/close.png" mode="" style="width: 40rpx; height: 40rpx">
					</image>
				</view>

				<view class="flex flex-wrap flex-start pb100" style="height: 600rpx;overflow: scroll;">
					<view @click="clickUser(item)" class="flex px22 mt20 flex-center align-center" v-for="item in child"
						:key="item.id" style="width: 33.3%; height: 80rpx">
						<view class="px40 br30 py20"
							:style="{ border: user_patrol_id_copy == item.id ? '2rpx solid #FF7334' : '2rpx solid #333' }">
							<text :class="['col3']"
								:style="{ color: user_patrol_id_copy == item.id ? '#FF7334' : '#333' }">{{ item.truename }}</text>
						</view>
					</view>
				</view>

				<view class="flex flex-around px22"
					style="position: absolute; bottom: 20rpx; height: 80rpx; left: 0; right: 0;background-color: white;">
					<view @click="reset" class="px22 br20 col2 mr30 flex1 flex flex-center align-center"
						style="border: 2rpx solid #222"> 重置 </view>
					<view class="px22 colf flex1 br20 flex flex-center align-center" @click="handClick"
						style="border: 2rpx solid #ff7334; background-color: #ff7334"> 确定 </view>
				</view>
			</view>
		</u-popup>
	</view>

	<!-- </view> -->
</template>

<script>
	import AddPatrol from "@/managePage/pages/addPatrol/addPatrol.vue"
	import ProductCard from "@/components/ProductCard.vue"
	import {
		mapState
	} from "vuex"
	export default {
		components: {
			ProductCard,
			AddPatrol,
		},

		data() {
			return {
				list1: ["https://cdn.uviewui.com/uview/swiper/swiper1.png",
					"https://cdn.uviewui.com/uview/swiper/swiper2.png",
					"https://cdn.uviewui.com/uview/swiper/swiper3.png"
				],
				swiperIndex: 1,
				limit: 8,
				page: 1,
				selectZhenId: "",
				selectUserId: "",
				selectCunId: "",
				tabActive: 1,
				tabActive2: "",
				zhenId: "",
				cunId: "",
				top: "",
				height: "",
				tops: "",
				villageList: [],
				time: 1,
				userInfo: {},
				user_patrol_id_copy: "",
				status: "loadmore",
				loadingText: "努力加载中",
				loadmoreText: "轻轻上拉",
				nomoreText: "没有更多了",
				bannerList: [],
				child: [],

				productData: [],
				homeData: {},
				user_patrol_id: "",
				popupShow: false,
			}
		},
		created() {
			this.init()
			this.getUserInfo()
			this.$store.dispatch("address/getAddress")
		},
		mounted() {
			console.log(this.address, "oooooooooo")
		},
		onReady() {
			uni.getSystemInfo({
				success: (e) => {
					this.top = e.statusBarHeight
					let custom = uni.getMenuButtonBoundingClientRect()
					this.height = custom.height + (custom.top - e.statusBarHeight) * 2
					this.tops = this.top + this.height
				},
			})
		},
		computed: {
			...mapState({
				address: (state) => state.address.addressList,
			}),
			selectUserName: {
				get() {
					let active = this.child.filter((item) => {
						return item.id == this.user_patrol_id
					})
					if (active.length > 0) {
						return active[0].truename
					} else {
						return "筛选巡查员"
					}
				},
			},
			selectCunName: {
				get() {
					let active = this.villageList.filter((item) => {
						return item.id == this.cunId
					})

					if (active.length > 0) {
						return active[0].name
					} else {
						return "选择村"
					}
				},
			},
			selectZhenName: {
				get() {
					let active = this.address.filter((item) => {
						return item.id == this.zhenId
					})
					if (active.length > 0) {
						return active[0].name
					} else {
						return "选择镇"
					}
				},
			},
			selectShiUserName: {
				get() {
					return ""
				},
			},
		},
		watch: {
			tabActive: {
				handler(newVal) {
					if (newVal == 1) {
						this.time = 1
					} else if (newVal == 2) {
						this.time = 2
					}
					this.init()
				},
			},
		},
		methods: {
			loadMore() {
				if (this.status == "nomore" || this.productData.length < 5) {
					return
				}
				this.status = "loading"
				this.page++
				this.getMore()
			},
			clickUser(item) {
				this.user_patrol_id_copy = item.id
			},
			clickZhen(item) {
				this.zhenId = item.id
				this.address.forEach((item2) => {
					if (item2.id == item.id) {
						if (item.village) {
							this.villageList = item.village
						} else {
							this.villageList = []
						}
					}
				})
			},
			clickCun(item) {
				this.cunId = item.id
			},
			getUserInfo() {
				this.$http({
					url: "/Data/user_info",
				}).then((res) => {
					this.userInfo = res.data
					if (res.data.child) {
						this.child = res.data.child
					} else {
						this.child = []
					}
				})
			},
			handClick() {
				console.log(this.user_patrol_id_copy, "this.user_patrol_id_copy")
				if (this.user_patrol_id_copy !== "") {
					this.user_patrol_id = this.user_patrol_id_copy
					this.popupShow = false
				} else {
					this.user_patrol_id = ""
					this.popupShow = false
				}
				this.init()
			},
			submitCun() {
				if (this.cunId !== "") {
					this.selectCunId = this.cunId
					this.popupShow = false
					this.getXunChaList()
				} else {
					this.selectCunId = ""
					this.popupShow = false
				}
				//获取村下面的巡查员列表
				this.init()
			},
			getXunChaList() {
				this.$http({
					url: "/Data/get_patrol_user",
					data: {
						village_id: this.selectCunId,
						county_id: this.selectZhenId,
					},
				}).then((res) => {
					if (res.data) {
						this.child = res.data
					} else {
						this.child = []
					}
				})
			},
			submitZhen() {
				if (this.zhenId !== "") {
					this.selectZhenId = this.zhenId
					this.popupShow = false
				} else {
					this.selectZhenId = ""
					this.popupShow = false
				}
				this.init()
			},
			reset() {
				this.user_patrol_id_copy = ""
			},
			resetCun() {
				this.selectCunId = ""
				this.cunId = ""
				this.child = []
			},
			resetZhen() {
				this.selectZhenId = ""
				this.zhenId = ""
				this.villageList = []
			},
			tabClick(index) {
				if ([1, 2].includes(index)) {
					this.tabActive = index
				} else {
					this.tabActive2 = index
					this.open()
				}
			},
			change(e) {
				this.swiperIndex = e.current
			},
			click() {},
			close() {
				this.popupShow = false
			},
			open() {
				this.popupShow = true
			},
			addPatrol() {
				uni.navigateTo({
					url: "/managePage/pages/addPatrol/addPatrol",
				})
			},
			getMore() {
				this.$http({
					url: "/Data/home",
					data: {
						page: this.page,
						limit: this.limit,
						time: this.time,
						village_id: this.selectCunId,
						county_id: this.selectZhenId,
						user_patrol_id: this.user_patrol_id,
					},
				}).then((res) => {
					if (res.data.list.length < this.limit) {
						this.status = "nomore"
					} else {
						this.status = "loadmore"
					}
					console.log(res.data.list, "res.data.listres.data.list")
					this.productData.push(...res.data.list)
					console.log(this.productData, "this.productDatathis.productData")
				})
			},
			goUser() {
				uni.navigateTo({
					url: "/managePage/pages/user/user",
				})
			},
			goXuncha() {
				uni.navigateTo({
					url: "/managePage/pages/xuncha/xuncha",
				})
			},
			init() {
				this.page = 1
				this.status = "loading"
				this.productData = []
				//市级账号筛选镇村和巡查员
				// if(userInfo.identity_type == 1){

				// }
				this.$http({
					url: "/Data/home",
					data: {
						page: this.page,
						limit: this.limit,
						time: this.time,
						village_id: this.selectCunId,
						county_id: this.selectZhenId,
						user_patrol_id: this.user_patrol_id,
					},
				}).then((res) => {
					this.homeData = res.data
					this.bannerList = res.data.banner.map((item) => item.img)
					// this.count = res.data.count
					this.productData = res.data.list
					if (res.data.list.length < this.limit) {
						this.status = "nomore"
					} else {
						this.status = "loadmore"
					}
				})
			},

			goMonth() {
				uni.navigateTo({
					url: "/managePage/pages/monthXuncha/monthXuncha",
				})
			},
			goTotal() {
				uni.navigateTo({
					url: "/managePage/pages/totalXuncha/totalXuncha",
				})
			},

			ProductCardClick(item) {
				uni.navigateTo({
					url: "/managePage/pages/patrolDetail/patrolDetail?id=" + item.id,
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>